<template>
  <div class="information">
    <div class="information_one" v-if="!mideShow">
      <text-list label-width="200px" :column="1">
        <div class="box_img">
          <div class="lef">
            <span class="lab">店铺头像：</span>
            <span class="fangda">点击放大图片</span>
          </div>
          <div class="rig">
            <img class="rig_img" v-if="formInline.shopIcon" :src="formInline.shopIcon" alt=""
              @click="handleFang(formInline.shopIcon)" />
          </div>
        </div>
        <text-item label="店铺名称：">{{ data.shopName }}</text-item>
        <text-item label="店铺类型：">{{ data.shopTypeName }}</text-item>
        <text-item label="店铺定位：">{{ data.locateAddress }}</text-item>
        <text-item label="详细地址：">{{ data.address }}</text-item>
        <text-item label="营业时间：">{{ data.startTime }} - {{ data.endTime }}</text-item>
        <text-item label="每周营业日：">{{ data.weekTime }}</text-item>
        <text-item label="店铺联系电话：">{{ data.phone }}</text-item>
        <text-item label="神椰店铺类型：">{{ data.shenyeTypeName }}</text-item>
        <text-item label="神椰店铺行业：">{{ data.shenyeIndustryName }}</text-item>

        <!-- <text-item label="神椰店铺标签：">{{ data.shenyeShopTagType==2?'金牌商家':'未选择' }}</text-item> -->

        <text-item label="神椰店铺排序：">{{ data.sort }}</text-item>
        <text-item label="所属地区：">{{ data.provinceName }}{{ data.cityName }}{{ data.areaName }}</text-item>
        <!-- <div class="li">
          <div class="lef">店铺标签：</div>
          <div class="rig">
            <span v-for="(item, index) in data.labelList" :key="index">{{
              item
            }}</span>
          </div>
        </div> -->
        <text-item label="品牌介绍：">{{ data.introduce }}</text-item>
        <div class="box_img">
          <div class="lef">
            <span class="lab">商家资质：</span>
            <span class="fangda">点击放大图片</span>
          </div>
          <div class="rig">
            <img class="rig_img" v-for="(item, idx) in formInline.competencyImgList" :key="idx" :src="item" alt=""
              @click="handleFang(item)" />
          </div>
        </div>
        <div class="box_img">
          <div class="lef">
            <span class="lab">店铺图片：</span>
            <span class="fangda">点击放大图片</span>
          </div>
          <div class="rig" style="flex-wrap: wrap">
            <img class="rig_img" v-for="(item, idx) in formInline.shopImgList" :key="idx" :src="item" alt=""
              @click="handleFang(item)" />
          </div>
        </div>
      </text-list>
      <div class="back">
        <el-button size="medium" @click="back">返回</el-button>
        <el-button size="medium" @click="getMideShow">修改店铺信息</el-button>
        <el-button size="medium" type="primary" @click="getDisable(id)">{{
          statusText
        }}</el-button>
      </div>
      <img-detail-dialog v-if="ImgDetailDialog" :id="id" :imgUrl="urlData" :visible.sync="ImgDetailDialog" />
    </div>
    <!-- 修改 -->
    <div class="information_two" v-if="mideShow">
      <el-form :inline="true" :rules="rules" :model="formInline" ref="ruleForm" class="demo-form-inline">

        <el-form-item label="店铺头像：" prop="shopIcon" :label-width="labelWidth" ref="shopIconRef">
          <ImageUploadMore :limit="1" :fileSize="20" @successImg="getShopIconImg" :value="formInline.shopIcon">
          </ImageUploadMore>
        </el-form-item>
        <el-form-item label="店铺名称：" prop="shopName" :label-width="labelWidth">
          <el-input v-model="formInline.shopName" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺类型：" required prop="shopType" :label-width="labelWidth">
          <!-- el-input表单校验占位用，不显示 -->
          <el-input v-model="formInline.shopType" :disabled="true" v-show="false"></el-input>
          <!--  -->
          <el-cascader v-model="avalue" :options="typeLs" :show-all-levels="false" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="店铺经纬度坐标：" prop="lntLatStr" :label-width="labelWidth" key="3">
          <el-input v-model="formInline.lntLatStr" placeholder="请输入经纬度坐标" ></el-input>
          <el-button type="primary" @click="guUrl()"  style="margin-left: 20px;">获取经纬度坐标</el-button>
        </el-form-item>
        <!-- <el-form-item label="店铺定位：" prop="locateAddress" :label-width="labelWidth">
          <span class="fontsize">{{ formInline.locateAddress }}</span>
          <el-input v-model="formInline.locateAddress" :disabled="true" v-show="false"></el-input>
          <span class="fontsize" @click="modelMsg = true"
            style="color: #1890ff; margin-left: 30px; cursor: pointer">点击定位地址</span>
        </el-form-item> -->
        <el-form-item label="详细地址：" prop="address" :label-width="labelWidth">
          <el-input v-model="formInline.address" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="营业时间：" required :label-width="labelWidth">
          <el-col :span="12">
            <el-form-item prop="startTime">
              <el-time-select v-model="formInline.startTime" placeholder="开始时间" :picker-options="{
                start: '00:00',
                step: '00:10',
                end: '23:59',
              }">
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-time-select v-model="formInline.endTime" placeholder="结束时间" :picker-options="{
                start: '00:00',
                step: '00:10',
                end: '23:59',
              }">
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="每周营业日：" required prop="weekTime" label-width="150px">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="店铺联系电话：" :label-width="labelWidth">
          <el-input v-model="formInline.phone" placeholder="请输入店铺联系电话"></el-input>
        </el-form-item>
        <el-form-item label="神椰店铺类型：" required prop="shenyeType" :label-width="labelWidth">
          <el-select v-model="formInline.shenyeType" placeholder="请选择" :disabled="formInline.shenyeType ? true : false">
            <el-option v-for="item in shopTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="神椰店铺行业：" required prop="shenyeIndustryId" :label-width="labelWidth">
          <el-select v-model="formInline.shenyeIndustryId" placeholder="请选择">
            <el-option v-for="item in shenyeIndustryList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="神椰店铺标签：" required prop="shenyeShopTagType" :label-width="labelWidth">
            <el-select v-model="formInline.shenyeShopTagType" placeholder="请选择">
              <el-option v-for="item in shenyeShopTagTypeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
        <el-form-item label="神椰店铺排序：" prop="sort" :label-width="labelWidth">
          <el-input v-model="formInline.sort" placeholder="请输入神椰店铺排序"></el-input>
        </el-form-item>
        <el-form-item label="所属地区：" required prop="province" :label-width="labelWidth">
          <!-- el-input表单校验占位用，不显示 -->
          <el-input v-model="formInline.province" :disabled="true" v-show="false"></el-input>
          <!--  -->
          <el-cascader :options="regionOptions" :props="{ value: 'id', label: 'label', children: 'children' }"
            v-model="regionAvalue" @change="regionChange"></el-cascader>
        </el-form-item>
        <el-form-item label="邀请人：" :label-width="labelWidth">
          <el-select v-model="formInline.referrer" placeholder="请选择">
            <el-option v-for="item in referrerList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌介绍：" :label-width="labelWidth">
          <el-input type="textarea" v-model="formInline.introduce" placeholder="请输入" maxlength="300"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="商家资质：" :label-width="labelWidth">
          <ImageUploadMore :limit="6" :fileSize="20" @successImg="getCompetencyImgList"
            :value="formInline.competencyImgList">
          </ImageUploadMore>
          <div>({{ formInline.competencyImgList.length }}/6)</div>
        </el-form-item>
        <el-form-item label="店铺图片：" :label-width="labelWidth">
          <div style="width: 1000px">
            <ImageUploadMore :limit="10" :fileSize="20" @successImg="getShopImgList"
              :value="formInline.shopImgList">
            </ImageUploadMore>
          </div>

          <div>({{ formInline.shopImgList.length }}/10)</div>
        </el-form-item>
      </el-form>
      <div class="back">
        <el-button size="medium" @click="closeMideShow">取消</el-button>
        <el-button size="medium" type="primary" :loading="sumitLoading" @click="sumit('ruleForm')">保存</el-button>
      </div>
      <img-detail-dialog v-if="ImgDetailDialog" :id="id" :imgUrl="urlData" :visible.sync="ImgDetailDialog" />
      <el-dialog title="选择定位" :visible.sync="modelMsg">
        <div class="msgDiv">
          <el-autocomplete style="width: 80%; margin-right: 10px" class="inline-input" v-model="address"
            :fetch-suggestions="watchInput" placeholder="请输入内容" :trigger-on-focus="false"
            @select="handleSelect"></el-autocomplete>
          <div id="container" style="margin-top: 20px"></div>
          <div class="dialog_bottom">
            <el-button style="margin-right: 60px" @click="modelMsg = false">取消</el-button>
            <el-button type="primary" @click="determine">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// components
import Loading from "@/components/Loading/index";
import imgDetailDialog from "./storeDetail/imgDetailDialog";
import ImageUploadMore from "@/components/ImageUploadMore"
// api
import {
  getMerchantShopDetail,
  setshopStatus,
  adminUpdateShop,
  shopTypeTree,
  editSpurious,
} from "@/api/merchants";
import {
  getCity
} from "@/api/clientManagement";
import {
  referrer,
  industrySelect,
} from "@/api/merchants/merchantsAudit";
export default {
  components: {
    Loading,
    imgDetailDialog,
    ImageUploadMore
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    var checkWeekTime = (rule, value, callback) => {
      console.log('value是', value)
      if (!value) {
        return callback(new Error('请选择每周营业日'));
      } else {
        callback();
      }
    };
    var checkShopType = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择店铺类型'));
      } else {
        callback();
      }
    };
    var checkProvince = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择所属区域'));
      } else {
        callback();
      }
    };
    return {
      labelWidth: '140px',
      limit2: 20,
      mideShow: false,
      sumitLoading: false,//保存loading
      typeLs: [],
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      action2: process.env.VUE_APP_BASE_API + "/common/v1/watermarkUploadFile",
      competencyphotolist: [], //商家资质
      limit: 6, //商家资质上传数量限制
      modelMsg: false, //显示模态框
      address: "", //输入的地址
      mapList: [], //用来存搜索到的所有地址
      mapVal: "", //创建的地图，赋值用
      shopTypeList: [
        { id: '1', value: '平台' },
        { id: '2', value: '第三方' }
      ],
      // shenyeShopTagTypeList:[
      //   {id: '1', value: '未选择'},
      //   {id: '2', value: '金牌商家'}
      // ],
      shenyeIndustryList: [],//神椰店铺行业列表
      referrerList: [],//邀请人列表
      regionOptions: [], //城市数组
      regionAvalue: [],
      formInline: {
        shenyeIndustryId: '',
        id: "", //店铺id
        shopName: "", //店铺名称
        shopLnt: "", //店铺经度
        shopLat: "", //店铺纬度
        address: "", //详细地址
        lntLatStr: '',//	店铺经纬度字符串
        locateAddress: "", //定位地址
        startTime: "", //开始时间
        endTime: "", //结束时间
        weekTime: "", //每周营业日
        phone: "", //电话
        introduce: "", //品牌介绍
        competencyImgList: [], //资质图片
        shopImgList: [], //店铺图片
        shopIcon: "", //店铺头像
        province: '', //省
        city: '', //市
        area: '', //区
        shenyeType: '',//神椰店铺类型
        referrer: '',//	邀请人
        shopType: '',//店铺类型
        shopTypeName: '',//店铺类型
        shopTypeParent: '',//
        sort: '',//排序号
        // shenyeShopTagType:'1',//神椰店铺标签 1无 2金牌商家
      },
      rules: {
        shopIcon: [{
          required: true,
          message: '请上传店铺头像',
          trigger: 'change'
        }],
        shopName: [{
          required: true,
          message: '请输入店铺名称',
          trigger: ['blur', 'change']
        }],
        address: [{
          required: true,
          message: '请输入详细地址',
          trigger: ['blur', 'change']
        }],
        shopType: [{
          required: true,
          message: '请选择店铺类型',
          trigger: ['blur', 'change']
        }],
        startTime: [{
          required: true,
          message: '请选择开始时间',
          trigger: ['blur', 'change']
        }],
        endTime: [{
          required: true,
          message: '请选择结束时间',
          trigger: ['blur', 'change']
        }],
        weekTime: [{
          validator: checkWeekTime,
          trigger: 'change'
        }],
        lntLatStr: [{
          required: true,
          message: '请输入经纬度',
          trigger: ['blur', 'change']
        }],
        locateAddress: [{
          required: true,
          message: '请选择店铺定位',
          trigger: ['blur', 'change']
        }],
        shopType: [{
          validator: checkShopType,
          trigger: 'change'
        }],
        shenyeType: [{
          required: true,
          message: '请选择神椰店铺类型',
          trigger: 'change'
        }],
        shenyeIndustryId: [{
          required: true,
          message: '请选择神椰店铺行业',
          trigger: 'change'
        }],
        province: [{
          validator: checkProvince,
          trigger: 'change'
        }],
        enterFile: [{
          required: true,
          message: '请上传商家合同确认书',
          trigger: 'change'
        }],
        sort: [{
          required: true,
          message: '请输入店铺排序',
          trigger: ['blur', 'change']
        }],
        // shenyeShopTagType: [{
        //   required: true,
        //   message: '请选择神椰店铺标签',
        //   trigger: 'change'
        // }],
      },
      ImgDetailDialog: false,
      statusText: "下架店铺",
      data: {},
      urlData: "",
      checkAll: false,
      checkedCities: [],
      cities: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      isIndeterminate: false,
      avalue: [],
    };
  },
  computed: {},
  created() {
    this.getIndustrySelect()
    this.getReferrer()
    this.getCity()
    this.getTypels()
    this.getDetail();
  },
  watch: {
    //监听模态框是否显示,显示就执行初始化地图方法
    modelMsg(newVal, oldVal) {
      console.log(newVal);
      if (newVal == true) {
        this.initMap(this.formInline.shopLat, this.formInline.shopLnt);
      }
    },
  },
  methods: {
    //获取神椰行业
    getIndustrySelect() {
      var params = {}
      industrySelect(params).then(res => {
        this.shenyeIndustryList = res.result
      })
    },
    //获取邀请人下拉
    getReferrer() {
      var params = {}
      referrer(params).then(res => {
        this.referrerList = res.result
      })
    },
    getCity() { //查询城市数据
      const params = {};
      getCity(params)
        .then((res) => {
          this.regionOptions = res.result;
          this.regionOptions.forEach((item) => {
            item.children.forEach((items) => {
              items.children.forEach((itemss) => {
                if (itemss.children.length == 0) {
                  itemss.children = null
                }
              })
            })
          })
        })
        .finally(() => { });
    },
    // 获取店铺类型
    getTypels() {
      //shopTypeTree
      this.loading = true;
      shopTypeTree()
        .then((res) => {
          let ls = [];
          console.log("res.result+++", res.result);
          ls = this.getTreeData(res.result);
          // console.log(this.typeLs)
          let ls1 = ls.map((item) => {
            item.value = item.id;
            item.children.map((items) => {
              items.value = items.id;
            });
            return item;
          });
          console.log("ls1+++", ls1);
          this.typeLs = ls1;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleChange(value) { //店铺类型选择 
      console.log(this.avalue);
      let _this = this;
      console.log("value+++++++++++++", value[1], value);
      _this.formInline.shopType = value[1];
      _this.formInline.shopTypeParent = value[0]
      console.log(this.typeLs)
      this.typeLs.forEach((item) => {
        item.children.forEach((nav) => {
          if (nav.id == _this.formInline.shopType) {
            _this.formInline.shopTypeName = nav.label
          }
        })
      })
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          // data[i].children=undefined;
          delete data[i].children;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    getShopIconImg(e) { //店铺头像
      console.log(e)
      this.formInline.shopIcon = e
      this.$refs['shopIconRef'].clearValidate();
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
      console.log(val);
      console.log(this.checkedCities);
      if (val == true) {
        this.formInline.weekTime = "周一至周日";
      } else {
        this.formInline.weekTime = "";
      }
      console.log(this.formInline.weekTime);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      console.log(this.checkedCities);
      let dataone = this.checkedCities.join("、");
      console.log(dataone);
      if (dataone == "") {
        this.formInline.weekTime = "";
      } else if (dataone == "周一、周二、周三、周四、周五、周六、周日") {
        this.formInline.weekTime = "周一至周日";
      } else {
        this.formInline.weekTime = dataone;
      }
      console.log(this.formInline.weekTime);
    },
    regionChange(value) { //城市区域选择
      this.formInline.province = value[0];
      this.formInline.city = value[1];
      this.formInline.area = value[2];
    },
    //获取店铺信息
    getDetail() {
      console.log("this.id", this.id);
      var params = {
        id: this.id
      }
      getMerchantShopDetail(params).then((res) => {
        console.log("获取详情", res);
        const { result } = res;
        this.info = result;
        this.formInline.id = result.id;
        this.formInline.shopIcon = result.shopIcon;
        this.formInline.lntLatStr = result.lntLatStr;
        this.formInline.shopName = result.shopName;
        this.formInline.locateAddress = result.locateAddress;
        this.formInline.shopType = result.shopType;
        this.formInline.startTime = result.startTime;
        this.formInline.endTime = result.endTime;
        this.formInline.phone = result.phone;
        this.formInline.introduce = result.introduce;
        this.formInline.weekTime = result.weekTime;
        this.formInline.referrer = result.referrer;
        // this.formInline.shopTypeName = result.shopTypeName;
        this.formInline.status = result.status;
        this.formInline.address = result.address;
        this.formInline.shopImgList = result.shopImgList;
        this.limit = 10 - result.shopImgList.length;
        this.formInline.competencyImgList = result.competencyImgList;
        this.limit = 6 - result.competencyImgList.length;
        this.formInline.shopLat = result.shopLat;
        this.formInline.shopLnt = result.shopLnt;
        this.address = result.locateAddress;
        this.formInline.sort = result.sort;
        this.formInline.shenyeIndustryId = result.shenyeIndustryId;
        this.formInline.shenyeType = result.shenyeType;
        // this.formInline.shenyeShopTagType = result.shenyeShopTagType;
        // 处理店铺类型回显
        let value = [];
        value.push(result.shopTypeParent);
        value.push(result.shopType);
        value.join(",");
        this.avalue = value;
        //处理所属区域回显
        let regionAvalue = [];
        regionAvalue.push(result.province);
        regionAvalue.push(result.city);
        regionAvalue.push(result.area);
        regionAvalue.join(",");
        console.log('regionAvalue', regionAvalue)
        this.regionAvalue = regionAvalue;
        this.formInline.province = result.province
        this.formInline.city = result.city
        this.formInline.area = result.area
        // 处理营业日期
        if (this.formInline.weekTime == '周一至周日') {
          this.checkAll = true
          this.checkedCities = this.cities
        } else {
          var singleTime = ''
          singleTime = this.formInline.weekTime.split('、')
          this.isIndeterminate = singleTime.length > 0 && singleTime.length < this.cities.length;
          this.checkedCities = singleTime
        }

        this.statusText = result.status == "1" ? "下架店铺" : "上架店铺";
        this.data = result;
      });
    },
    //禁用店铺
    getDisable(shopId) {
      const h = this.$createElement;
      var confirmButtonText = "下架";
      var status = "";
      console.log("this.data.status", this.data.status);
      let message = ''
      if (this.data.status == "1") {
        confirmButtonText = "下架";
        message = '下架后，店铺不可进行发布资产、联动营销和提现操作'
        status = "2";
      } else {
        confirmButtonText = "上架";
        status = "1";
        message = '上架后，店铺可进行发布资产、联动营销和提现操作'
      }
      this.$msgbox({
        title: `确定要${confirmButtonText}该店铺?`,
        message: h("p", null, [
          h(
            "span",
            { style: "color: #1890ff" },
            message
          ),
        ]),
        showCancelButton: true,

        cancelButtonText: "取消",
        confirmButtonText: confirmButtonText,
        type: "error",
      })
        .then(() => {
          var params = {
            id: shopId,
            status: status,
          };
          console.log(params, this.id);
          setshopStatus(params).then((res) => {
            this.handleSuccess("操作成功");
            this.getDetail();
          });
        })
        .catch(() => { });
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    getMideShow() {
      //修改店铺信息
      this.mideShow = true;
    },
    closeMideShow() {
      //取消修改
      this.getDetail();
      setTimeout(() => {
        this.mideShow = false;
      }, 100);
    },
    handleSuccess(msg) {
      if (msg === "已拒绝") {
        var type = "error";
      } else {
        var type = "success";
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.$emit("success");
        },
      });
    },
    //放大图片
    handleFang(url) {
      this.urlData = url;
      this.ImgDetailDialog = true;
    },
    getCompetencyImgList(e) { //店铺资质图片
      console.log('e', e)
      // var reg1 = new RegExp("https://bee.xiaodaiyan.com", "g"); // 加'g'，删除字符串里所有的"a"
      // e = e.replace(reg1, "");
      if (e != '') {
        this.formInline.competencyImgList = e.split(",")
      } else {
        this.formInline.competencyImgList = []
      }
    },
    getShopImgList(e) { //店铺图片上传
      console.log('e', e)
      if (e != '') {
        this.formInline.shopImgList = e.split(",")
      } else {
        this.formInline.shopImgList = []
      }
    },
    listShopSuccess(res, file, fileList) {
      //listShopSuccess
      //店铺图片上传
      this.formInline.shopImgList.push(res.result.url);
      console.log(this.formInline.shopImgList);
    },
    detailshopImg(index) {
      //删除店铺图片
      console.log(index);
      this.formInline.shopImgList.splice(index, 1);
      this.limit2 = 20 - this.formInline.shopImgList.length;
      console.log(this.limit);
    },
    handleSelect(item) {
      console.log(item);
      this.initMap(item.location.lat, item.location.lng);
      this.formInline.shopLnt = item.location.lng;
      this.formInline.shopLat = item.location.lat;
    },
    determine() {
      console.log(this.address);
      this.formInline.locateAddress = this.address;
      this.modelMsg = false;
    },
    watchInput(queryString, cb) {
      console.log(queryString);
      const KEY = "IFRBZ-GZ2CQ-YHW5J-GSUGE-RC7VS-JBBWN";
      let url = "https://apis.map.qq.com/ws/place/v1/suggestion";
      let keyword = queryString; //传入的关键词
      this.$jsonp(url, {
        key: KEY,
        region: "全国",
        keyword: keyword,
        output: "jsonp",
      })
        .then((res) => {
          let opt = [];
          res.data.forEach((res) => {
            let opt1 = {
              value: res.title + "-" + res.address,
              location: res.location,
            };
            opt.push(opt1);
          });
          this.mapList = opt;
          console.log(this.mapList);
          // 调用 callback 返回建议列表的数据
          cb(this.mapList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initMap(lat, lng) {
      //如果地图存在，就销毁，下面会重新创建一个
      if (this.mapVal) {
        this.mapVal.destroy();
      }
      //定义地图中心点坐标
      //this.$nextTick是等Dom加载完再执行
      this.$nextTick(() => {
        var center = new window.TMap.LatLng(lat, lng);
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        this.mapVal = new TMap.Map(document.getElementById("container"), {
          center: center, //设置地图中心点坐标
          zoom: 17.2, //设置地图缩放级别
          pitch: 43.5, //设置俯仰角
          rotation: 45, //设置地图旋转角度
          viewMode: "2D",
          mapStyleId: "style1", //个性化样式
        });
        //初始化marker
        var marker = new TMap.MultiMarker({
          id: "marker-layer", //图层id
          map: this.mapVal,
          styles: {
            //点标注的相关样式
            marker: new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: {
                x: 16,
                y: 32,
              },
              src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
            }),
          },
          geometries: [
            {
              //点标注数据数组
              id: "demo",
              styleId: "marker",
              position: new TMap.LatLng(lat, lng),
              properties: {
                title: "marker",
              },
            },
          ],
        });
      });
    },
    sumit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //保存adminUpdateShop
          console.log(this.formInline);
          var params = {
            ...this.formInline,
          };
          this.sumitLoading = true
          adminUpdateShop(params).then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.getDetail();
              this.mideShow = false;
              this.sumitLoading = false
            }, 1000);
          }).catch(() => {
            this.sumitLoading = false
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    //跳转经纬度查询地址
    guUrl(){
      window.open('https://lbs.qq.com/tool/getpoint/get-point.html', '_blank')
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/merchantsDetail";

.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }

  .main {
    margin: 0 auto;
  }

  .pic-list {
    display: flex;
    justify-content: space-around;
    width: 660px;
  }

  .img {
    display: block;
    width: 200px;
    height: auto;
  }

}

.information {
  padding: 20px;
}

.el-form--inline .el-form-item {
  display: block !important;
  ;
}

.back {
  margin-top: 30px;
}

.time_box {
  display: flex;
  align-items: center;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  width: 128px !important;
  height: 128px !important;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px !important;
  height: 128px !important;
  display: block;
}

.el-input {
  width: 500px;
}

.avatar-uploader2 {
  width: 128px;
  height: 128px;
  text-align: center;
  line-height: 128px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  margin-bottom: 20px;
}

.closeimg {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 99;
  font-size: 28px;
  cursor: pointer;
  background: #4e4e4e;
}

.img_box {
  width: 128px;
  height: 128px;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  position: relative;
}

.img_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.img_list img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.img_list::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.dialog_bottom {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.rig_img {
  margin-bottom: 10px;
}

.el-date-editor {
  width: 200px;
}

.el-textarea {
  width: 600px;

}
</style>
